<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="plantillas/disenio_comun.xhtml">

	<!-- This methods defined in head HTML tag -->
	<ui:define name="head">
		<!-- Stylesheets import. 
		<h:outputStylesheet name="home.css" library="css" />
		-->
		
	<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedUser = ui.draggable;
 
        	droppedUser.fadeOut('fast');
    }
</script>

	</ui:define>

	<ui:define name="contenido">
	
		<h:form id="FormularioDelegarFunciones">
			<p:growl id="growl" showDetail="true" />
			<div>			
				<table border="0" cellpadding="5" cellspacing="0"  bgcolor="#EEEEEE">
					
					<tr>				 
				    	<td colspan="4" align="center">
				    		<h2 align="center"><h:outputText value="Asignar Resposables de Taller"/></h2>
							<center>(Coordinadores y Formadores)</center>
				    	</td>
					</tr>
					
					
					<tr>
						<td colspan="4" align="left">
						 

				    
				     <p:dialog widgetVar="dialog" id="dialog" modal="true" icon="ui-icon-extlink" >
			                    
								<p:dataTable id="tablaTalleres" var="taller" 
									    		value="#{controladorFunciones.talleres}"						    		
									    		paginator="true" rows="10"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaTaller"   
									            emptyMessage="Ningún taller se encontro con con el criterio dado"
									            tableStyle="width:700px;font-size: 90%" >  
									  				
									  		<f:facet name="header">  
										        Talleres disponibles
										    </f:facet>
							
										     <p:column id="columnaNombreTaller" sortBy="#{taller.nombre}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.codigo} - #{taller.nombre}" />
									        </p:column> 
									        
									        <p:column id="columnaFechaInicio" 	sortBy="#{taller.strFechaInicio}"
									                headerText="Fecha de Inicio" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaInicio}" />
									        </p:column> 
									         <p:column id="columnaFechaFin" sortBy="#{taller.strFechaFin}"
									                headerText="Fecha de Fin" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaFin}" />
									        </p:column> 
									        
									          <p:column headerText="" style="width:70px">  
								                 <p:commandButton id="seleccionar" update=":FormularioDelegarFunciones" icon="ui-icon-search" 
								                 process="@this" style="font-size: 80%" title="Seleccionar el taller" onclick="dialog.hide()">  
								                 	  <f:setPropertyActionListener value="#{taller.id_taller}" target="#{controladorFunciones.loadTaller}" />
								                 </p:commandButton>
								                 
								                 
								             
									        </p:column> 

							</p:dataTable>
			         </p:dialog>
         			       

						</td>
					</tr>
					
					<p:messages  id="response" globalOnly="true" showDetail="true" autoUpdate="false" closable="true" />
					  <tr >
				     	<td colspan="4"  align="left">
				    	<p:commandButton value="Seleccionar Taller" onclick="dialog.show()"  icon="ui-icon-extlink"/>
				    	
				    
						<p:commandButton  value="Guardar Responsables" icon= "ui-icon-disk" onclick="confimacion.show()"  title="Registrar Funciones."/>
								            	
         				</td>
				       </tr>
				       
				     
				       
					<tr >
				      		<td colspan="4"  align="left">  <h1><h:outputText value="Taller Seleccionado: " rendered="#{controladorFunciones.mostrarTaller}"/>
				      			<h:outputText value="#{controladorFunciones.tallerSelected.nombre}" rendered="#{controladorFunciones.mostrarTaller}" /></h1></td>
				   </tr>
				     	
					
					
				  	<tr>
				  		
				    	<td colspan="2" align="left" style="vertical-align:top;">		
				    					 <p:fieldset id="tbUsers" legend="Personal Disponible" >
				    					 
				        				<p:dataTable id="tablaUsuarios" var="usuario" 
									    		value="#{controladorFunciones.usuarios}"						    		
									    		paginator="true" rows="10"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaUsuario"   
									            emptyMessage="Ningún usuario se encontro con con el criterio dado"
									            tableStyle="width:100%px;font-size: 90%" >  
									  				
									  
										      
										     <p:column id="columnaNombreUsuario" filterBy="#{usuario.nombres}"   
									        		sortBy="#{usuario.nombres}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left" >						             
									            <h:outputText value="#{usuario.nombres}" />
									            <p:watermark forElement="FormularioDelegarFunciones:tablaUsuarios:columnaNombreUsuario" value="Buscar..." />  
									        </p:column> 
									        
									        <p:column id="columnaApePaterno" filterBy="#{usuario.ape_pat}"   
									        		sortBy="#{usuario.ape_pat}"
									                headerText="Apellido Paterno" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.ape_pat}" />
									            <p:watermark forElement="FormularioDelegarFunciones:tablaUsuarios:columnaApePaterno" value="Buscar..." />  
									        </p:column> 
									         <p:column id="columnaApeMaterno" filterBy="#{usuario.ape_mat}"   
									        		sortBy="#{usuario.ape_mat}"
									                headerText="Apellido Materno" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.ape_mat}" />
									            <p:watermark forElement="FormularioDelegarFunciones:tablaUsuarios:columnaApeMaterno" value="Buscar..." />  
									        </p:column> 
									        
									        <p:column id="columnaPerfil" sortBy="#{usuario.strPerfil}"    headerText="Perfil"  style="text-align:left">						             
									            <h:outputText value="#{usuario.strPerfil}" />
									        </p:column> 
									        <p:column >
									                <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
									                <p:draggable for="dragIcon" />
									            </p:column>
							

									    </p:dataTable>
									    
									    
									    </p:fieldset>
								
						</td>
						    
						    <p:droppable for="selectedCoordinadores" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="tablaUsuarios" onDrop="handleDrop">
        						<p:ajax listener="#{controladorFunciones.onInsertCoordinador}" update=":FormularioDelegarFunciones" />
    						</p:droppable>
    						
    						<p:droppable  for="tbUsers" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="selectedCoordinadoresTable" onDrop="handleDrop">
        						<p:ajax listener="#{controladorFunciones.onCoorinadorDrop}" update=":FormularioDelegarFunciones" />
    						</p:droppable>
    						
						
						<td colspan="2" style="vertical-align:text-top;"  align="left">
							<table>
							<tr >
								<td>
								 <p:fieldset id="selectedCoordinadores" legend="Coordinadores del Taller" >
								 
								 	    
								        <p:outputPanel id="dropArea">
								        
								            <h:outputText value="!!!Coordinadores Aquí!!!" rendered="#{empty controladorFunciones.usuariosCoordinadores}" style="font-size:24px;" />
								            <p:dataTable id="selectedCoordinadoresTable" var="coordinador" 
								            value="#{controladorFunciones.usuariosCoordinadores}" rendered="#{not empty controladorFunciones.usuariosCoordinadores}"					    		
									    		paginator="true" rows="5"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaCoordinadores"   
									            tableStyle="width:100%;font-size: 90%" >
									            
									           
									           <p:column >
									                <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
									                <p:draggable for="dragIcon" />
									            </p:column>
									            
										     <p:column id="columnaNombreCoordinador" 	sortBy="#{coordinador.nombres}"
									                headerText="Nombre"  style="text-align:left">						             
									            <h:outputText value="#{coordinador.nombres}" />
									         </p:column>  
									        
									       <p:column id="columnaApePaternoCordi" 	sortBy="#{coordinador.ape_pat}"
									                headerText="Apellido Paterno" style="text-align:left">						             
									            <h:outputText value="#{coordinador.ape_pat}" />
									            
									        </p:column> 
									         <p:column id="columnaApeMaternoCordi" 	sortBy="#{coordinador.ape_mat}"	 
									          headerText="Apellido Materno" style="text-align:left">						             
									            <h:outputText value="#{coordinador.ape_mat}" />
									        </p:column> 									        
									            								               
								            </p:dataTable>
								        </p:outputPanel>
								    
 
								 
								 </p:fieldset>
								</td>
							</tr>
							
<!-- 							<p:droppable  for="tbUsers" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="selectedFormadoresTable" onDrop="handleDrop"> -->
<!--         						<p:ajax listener="#{controladorFunciones.onFormadorDrop}" update=":FormularioDelegarFunciones" /> -->
<!--     						</p:droppable> -->
							
    						 <p:droppable for="selectedFormadores" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="tablaUsuarios" onDrop="handleDrop">
        						<p:ajax listener="#{controladorFunciones.onInsertFormador}" update=":FormularioDelegarFunciones" />
    						</p:droppable>
    						<tr>  <h:outputText value=" " /></tr>
    						
							<tr>
								<td>
								 <p:fieldset id="selectedFormadores" legend="Docentes Formadores del Taller">
								   	<p:outputPanel id="dropArea2">
								            <h:outputText value="!!!Formadores Aquí!!!" rendered="#{empty controladorFunciones.usuariosFormadores}" style="font-size:24px;" />
								            <p:dataTable id="selectedFormadoresTable" var="formador" 
								            value="#{controladorFunciones.usuariosFormadores}" rendered="#{not empty controladorFunciones.usuariosFormadores}"					    		
									    		paginator="true" rows="5"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaFormadores"   
									            tableStyle="width:100%;font-size: 90%" >
									            
									         <p:column >
									                <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
									                <p:draggable for="dragIcon" />
									            </p:column>
									         
									           
										     <p:column id="columnaNombreCoordinador" 	sortBy="#{formador.nombres}"
									                headerText="Nombre"  style="text-align:left">						             
									            <h:outputText value="#{formador.nombres}" />
									         </p:column>  
									        
									       <p:column id="columnaApePaternoForma" 	sortBy="#{formador.ape_pat}"
									                headerText="Apellido Paterno" style="text-align:left">						             
									            <h:outputText value="#{formador.ape_pat}" />
									            
									        </p:column> 
									         <p:column id="columnaApeMaternoForma" 	sortBy="#{formador.ape_mat}"	 
									          headerText="Apellido Materno" style="text-align:left">						             
									            <h:outputText value="#{formador.ape_mat}" />
									        </p:column> 
									            
								               
								            </p:dataTable>
								        </p:outputPanel>
								 
								 
								 </p:fieldset>
								</td>
							</tr>
							
							</table>

						</td>
						
						
				  	</tr>

				</table>
			</div>
			

			<p:confirmDialog id="confirmationMessage" message="Desea guardar los cambios?"  
									                showEffect="bounce" hideEffect="explode"  
									                header="Confirmación de Usuario" severity="alert" widgetVar="confimacion">  
									                
					                			         
						<p:commandButton value="Si" id="eliminar" update=":FormularioDelegarFunciones" 
							oncomplete="confimacion.hide()"	 process="@this" actionListener="#{controladorFunciones.registrarFunciones}" />
							
						<p:commandButton value="No" onclick="confimacion.hide()" type="button" />   
									                  
			   		</p:confirmDialog>  
			
    
		</h:form>
		
		

	</ui:define>
</ui:composition>